<template>
  <button
    @click="handleClick"
    :disabled="disabled"
    :autofocus="autofocus"
    :type="htmlType"
    class="sm-button"
    :class="[
      disabled?'sm-button-disabled':'sm-button-type-'+type,
      'sm-button-size-'+size
    ]"
  >
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: "SmButton",
  props: {
    type: {
      type: String,
      default: "normal"
    },
    size: {
      type: String,
      default: "small"
    },
    htmlType: {
      type: String,
      default: "button"
    },
    autofocus: Boolean,
    disabled: Boolean
  },
  methods: {
    handleClick(evt) {
      // 向上传递点击事件
      this.$emit("click", evt);
    }
  }
};
</script>

<style>
.sm-button {
  cursor: pointer;
  user-select: none;
  display: inline-block;
  margin: 5px 5px;
  outline: none;
  border: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: #fff;
  text-align: center;
}

.sm-button-disabled {
  color: #fbfbfb;
  background-color: #b2b2b2;
  background-image: linear-gradient(#c2c2c2, #b2b2b2);
  cursor: not-allowed;
}

.sm-button-size-large {
  width: 200px;
  height: 50px;
  font-size: 18px;
  font-weight: 800;
  border-radius: 5px;
}
.sm-button-size-medium {
  width: 150px;
  height: 40px;
  font-size: 18px;
  font-weight: 800;
  border-radius: 5px;
}
.sm-button-size-small {
  width: 100px;
  height: 30px;
  font-size: 12px;
  font-weight: 550;
  border-radius: 4px;
}
.sm-button-size-mini {
  width: 70px;
  height: 30px;
  font-size: 10px;
  font-weight: 450;
  border-radius: 3px;
}

/* 常规（朴素）按钮（默认） */
.sm-button-type-normal {
  border: 1px solid #d7d7d7;
  color: #646464;
  background: #fcfcfc;
  background: linear-gradient(#fff, #f6f6f6);
}
.sm-button-type-normal:hover {
  background: #f3f3f4;
  background: linear-gradient(#f6f6f6, #f0f1f2);
}
.sm-button-type-normal:active {
  background: #ececec;
  background: linear-gradient(#e3e3e3, #f2f2f2);
}

/* 主要按钮（强调） */
.sm-button-type-primary {
  background: #6191f2;
  background: linear-gradient(#679af6, #5584f4);
}
.sm-button-type-primary:hover {
  background: #5782d8;
  background: linear-gradient(#5c89e5, #517acb);
}
.sm-button-type-primary:active {
  background: #5681d9;
  background: linear-gradient(#4d74d5, #6190dd);
}

/* 警告按钮（强调） */
.sm-button-type-warning {
  background-color: #ffd330;
  background-image: linear-gradient(#ffd330, #ffd22d);
}
.sm-button-type-warning:hover {
  box-shadow: inset 0 1px 1px #ffeb83, inset 0 0 2px #cab92d,
    inset 0 -2px 3px #c7a236, inset 0 0 100px rgba(199, 165, 34, 0.6);
}
.sm-button-type-warning:active {
  background-color: #c7a522;
  background-image: linear-gradient(#ffd330, #ffd22d);
  box-shadow: inset 0 1px 2px #ffeb83;
}

/* 危险按钮（强调） */
.sm-button-type-danger {
  background: #e97676;
  background: linear-gradient(#ed8888, #e26161);
}
.sm-button-type-danger:hover {
  background: #e57272;
  background: linear-gradient(#ee9393, #e57272);
}
.sm-button-type-danger:active {
  background: linear-gradient(#e77474, #da5050);
  background: -webkit-linear-gradient(#e77474, #da5050);
}
</style>
